<!DOCTYPR html>
<html xmlns:position="http://www.w3.org/1999/xhtml">
<head>
    <title>百度一下，你就知道</title>
    <style type="text/css">
        * {margin: 0;padding: 0;border: none;}
        body{
            height:100%;
            width:100%;
            margin:0;
            padding:0;
        }
        .demo{
            width:100%;
            height:100%;
            margin:0;
            padding:0;
        }
        .menu{
            text-align:right;
        }
        {
            text-decoration:none;
        }
        .middle{
            text-align:center;
            width:100%;
            height:100px;
            margin-top:130px;
        }
        .keyword{        /*用keyword定义好框架大小*/
            border: 1px solid #b6b6b6;
            width:540px;
            height:40px;
            font-size:16px;
        padding: 0 16px;border: 2px solid #AAAAAA;
        border-top-left-radius: 10px;border-bottom-left-radius: 10px;
        }
        .keyword:hover {border: 2px solid #999999;}     /*框架采用的颜色*/
        .keyword:focus {border: 2px solid #4e6ef2;}
        .submit {
            margin-left: -2px;font-size: 16px;color: #FFFFFF;   /*框架内字体颜色及大小*/
            height: 40px;line-height: 40px;border: none;
            background: #4e6ef2;padding: 0 24px;border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .img{              /*用img设置baidu图片大小*/
            align:middle;
            border:0;
            width:275px;
            height:150px;
        }
    </style>
</head>
<body>
<div style="text-align:right;">
    <div class="menu">
        <a href="http://news.baidu.com">新闻</a>    <!--用超链接方式使其跳转相应网站-->
        <a href="http://map.sogou.com">sogou</a>
        <a href="http://www.baidu.com/index.php?tn=87048150_dg&ch=1">登录</a>
        <a href="http://www.baidu.com/gaoji/preferences.html">设置</a>
        <a href="http://www.baidu.com/more/">更多产品</a>
    </div>
</div>
<div class="middle">
    <form action="http://www.baidu.com/baidu" target="_blank">      <!--设置baidu图片-->
        <a href="https://www.baidu.com/" target="_blank"  align="center">       <!--将baidu图片相应网址直接运用-->
            <img src="https://www.baidu.com/img/bd_logo1.png" alt="Baidu" class="img"></a>
        <br>
      <input type="text"  class="keyword"><button class="submit">百度一下 </button>
    </form>
</div>
</body>
</html>
